import React, { Component } from 'react'

import {withRouter} from "react-router-dom"
import {
    Menu, Icon,Avatar
} from 'antd';
import logo from "../../assets/log.svg"
import "./Frame.less"

//connect是react-redux提供的方法，这个方法返回的返回结果是一个高阶组件
import {
    connect
}from 'react-redux'

//connect的第一个参数是mapStateToProps，意思是把store.getState()的结果里的某些注入到组件的props上
const mapStateToProps=(state)=>{ 
    return{
        name:state.user.name
    }
}
//connect的第二个参数是mapDispatchToProps,意思是actionCreator
// const mapDispatchToProps=(dispatch)=>{
//     return{
//         changeName:()=>{
//             dispatch({
//                 type:'CHANGE_USER_NAME'
//             })  
//         }
//     }
// }
// @connect(mapStateToProps,mapDispatchToProps)
@connect(mapStateToProps)
@withRouter
export default class Frame extends Component {
    // constructor(){
    //     super()
    //     this.state={
    //          name:''
    //      }
    // }
    // getNameFromStore=()=>{
    //     this.setState({
    //         name:store.getState().user.name
    //     })
    // }
    // componentDidMount(){
    //     this.getNameFromStore()
    //     store.subscribe(this.getNameFromStore)
       
    // }
    onMenuClick=({key})=>{
        // console.log(this.props)
        // console.log(key)
        // 把传递进来的key的值push到props.history里
        
        this.props.history.push(key)
    }
    render() {   
        return (

            <div className="ra-layout">
                <div className="ra-header">
                    <div className="ra-logo"><img src={logo} alt="" /></div>
                    <Avatar size={32} icon="user"  style={{marginTop:10}}/>
                    <span style={{marginTop:15 ,marginLeft:6}}>{this.props.name}</span>
                </div>
                <div className="ra-main">
                    <div className="ra-side">
                        <Menu
                            onClick={this.onMenuClick}
                            mode="inline"
                            defaultSelectedKeys={[this.props.routes[0].path]}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            {/* 渲染页面 */}
                            {this.props.routes.map(route => {
                                return <Menu.Item  key={route.path}><Icon type={route.iconType} />{route.title}</Menu.Item>

                            })
                            }       
                        </Menu>
                    </div>
                    <div className="ra-content">
                        {this.props.children}
                    </div>
                </div>
            </div>
        )
    }
}

